<template>
  <div class="play-bar" v-if="currentSong">
    <div :class="{ thumb: true, 'rotate-icon': playing }">
      <div class="thumbBox">
        <img
          :src="
            (currentSong.song
              ? currentSong.picUrl
              : currentSong.al
              ? currentSong.al.picUrl
              : currentSong.artists[0].img1v1Url) | completeImageUrl
          "
          alt=""
        />
      </div>
    </div>
    <h5>
      {{ currentSong.name }}
      <span
        v-for="(ali, index) in currentSong.song
          ? currentSong.song.alias
          : currentSong.al
          ? currentSong.alia
          : currentSong.alias"
        :key="index"
        >({{ ali }})</span
      >
      <i>{{
        currentSong.song
          ? currentSong.song.album.name
          : currentSong.al
          ? currentSong.al.name
          : currentSong.album.name
      }}</i>
    </h5>
    <div class="progress">
      <canvas ref="canvas" width="80" height="80"></canvas>
      <span
        class="iconfont icon-24gf-play"
        v-if="!playing"
        @click.stop="$emit('audio-play-handler')"
      ></span>
      <span
        class="iconfont icon-weibiaoti519"
        v-else
        @click.stop="$emit('audio-pause-handler')"
      ></span>
    </div>
    <!-- 列表按钮 -->
    <div
      class="list iconfont icon-caidan"
      @click.stop="$parent.showMyPlayList = true"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    currentSong: Object,
    playing: Boolean,
    currentTime: Number,
    duration: Number,
  },
  computed: {
    percentedProgress: function () {
      return this.duration === 0 ? 0 : this.currentTime / this.duration;
    },
  },
  watch: {
    percentedProgress: function (n) {
      // console.log(n);
      const context = this.$refs.canvas.getContext("2d");
      context.clearRect(0, 0, 80, 80);

      context.beginPath();
      context.arc(
        40,
        40,
        32,
        (Math.PI / 180) * -90,
        (Math.PI / 180) * (360 * n - 90)
      );
      context.strokeStyle = "rgba(255,0,0,0.5)";
      context.lineWidth = 5;
      context.stroke();

      context.beginPath();
      context.arc(
        40,
        40,
        32,
        (Math.PI / 180) * (360 * n - 90),
        (Math.PI / 180) * 270
      );
      context.strokeStyle = "rgba(0,0,0,0.3)";
      context.lineWidth = 4;
      context.stroke();
    },
  },
};
</script>

<style lang="less">
.play-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  z-index: 9;
  .thumb {
    width: 50px;
    height: 50px;
    border-radius: 50%;

    transition: margin 0.5s;
    background-color: rgb(88, 88, 88);
    position: relative;
    .thumbBox {
      width: 90%;
      height: 90%;
      border-radius: 50%;
      background-color: #000;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      img {
        width: 70%;
        height: 70%;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  h5 {
    // flex: 1;
    width: 50%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    // color: #333;
    font-size: 18px;
    i {
      font-size: 14px;
      font-style: normal;
      color: #888;
      &::before {
        content: "- ";
      }
    }
  }
  .progress {
    position: relative;
    canvas {
      //   outline: 1px solid green;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
    }
    span {
      //   background: #fff;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      display: inline-block;
      font-size: 22px;
    }
  }
  .list {
    font-size: 30px;
  }
}
.rotate-icon {
  animation: rotate 3s infinite linear forwards;
  // animation-play-state: paused;
  margin-top: -20px;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>